<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

onLoad(() => {})

const favoritesList = ref([
  {
    name: '重庆医科大学',
    science: '文科',
    tag: '文学 新闻传播',
    icon: '',
    address: '重庆 重庆市',
    schoolClass: '公办',
    grade: '普通本科',
    type: '医药类',
  },
  {
    name: '重庆工商职业学院',
    science: '理科',
    tag: '工学 计算机类',
    icon: '',
    address: '重庆 重庆市',
    schoolClass: '公办',
    grade: '专科',
    type: '综合类',
  },
  {
    name: '重庆理工大学',
    science: '文科',
    tag: '文学 新闻传播',
    icon: '',
    address: '重庆 重庆市',
    schoolClass: '公办',
    grade: '普通本科',
    type: '综合类',
  },
])

const provinceList = ref([
  { text: '重庆', id: '0' },
  { text: '成都', id: '1' },
  { text: '北京', id: '2' },
  { text: '重庆', id: '0' },
  { text: '成都', id: '1' },
  { text: '北京', id: '2' },
  { text: '重庆', id: '0' },
  { text: '成都', id: '1' },
  { text: '北京', id: '2' },
])
const selectProvince = ref(provinceList.value[0].text)
const changeProvince = (e: { text: string }) => {
  if (e.text) {
    selectProvince.value = e.text
    console.log('change1', e)
  } else {
    selectProvince.value = '省份'
  }
}

const selectSchoolLevel = ref('层次')

const changeSchoolLevel = (e: { text: string }) => {
  if (e.text) {
    selectSchoolLevel.value = e.text
    console.log('change1', e)
  } else {
    selectSchoolLevel.value = '层次'
  }
}

const province = ref()
const schoolLevel = ref()

const schoolType = ref()
const openPop = (item: { open: () => void }) => {
  item.open()
}

const closePop = (item: { close: () => void }) => {
  item.close()
}

const toByCollegeDetail = (item) => {
  uni.navigateTo({
    url: '/pages/SubjectSelectionAssistant/byCollege/detail',
  })
}
</script>

<template>
  <gui-page
    ref="guipage"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :loadmore="false"
    :refresh="false"
    style="background-color: white"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <gui-header-leading :back="true" :home="false" />
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">根据大学选科</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width: 120rpx" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gFixedTop>
      <!-- 分类导航 -->
    </template>
    <template #gBody>
      <view class="wh100p flex-column gui-relative favorites" style="flex: 1">
        <view
          class="w100p flex-center bgfff column-center gap12"
          style="padding: 10rpx 0; height: 90rpx; box-sizing: border-box; padding-left: 20rpx"
        >
          <view class="h100p flex column-center relative" style="width: 70%; background-color: #f2f2f2; border-radius: 40rpx">
            <text class="gui-icons gui-block gui-color-gray gui-text" style="left: 5%; line-height: 28rpx; margin-left: 20rpx">
              &#xe604;
            </text>
            <input
              class="input-box wh100p flex column-center"
              placeholder="请输入量表名"
              placeholder-style="color:#787878;font-size:26rpx;"
              style="border: 0px; margin-left: 10rpx"
            />
          </view>
          <view class="flex-center" style="width: auto; height: 100%">
            <button
              class="flex column-center gui-button"
              :plain="true"
              style="border-color: #4687fb !important; border-radius: 40rpx"
              type="default"
            >
              <text class="gui-button-text" style="color: #4687fb; padding: 0rpx 40rpx">搜索</text>
            </button>
          </view>
        </view>

        <view class="flex-around w100p" style="padding: 0 20rpx; box-sizing: border-box">
          <view class="bgf1f1f1 flex-between mt10 column-center select-box" style="" @tap="openPop(province)">
            {{ selectProvince }}
            <text class="gui-icons gui-block gui-color-gray gui-text" style="left: 5%; line-height: 28rpx; margin-left: 20rpx">
              &#xe603;
            </text>
          </view>
          <view class="bgf1f1f1 flex-between mt10 column-center select-box" style="" @tap="openPop(schoolLevel)">
            {{ selectSchoolLevel }}
            <text class="gui-icons gui-block gui-color-gray gui-text" style="left: 5%; line-height: 28rpx">&#xe603;</text>
          </view>
          <view class="bgf1f1f1 flex-between mt10 column-center select-box" style="" @tap="openPop(schoolType)">
            {{ selectProvince }}
            <text class="gui-icons gui-block gui-color-gray gui-text" style="left: 5%; line-height: 28rpx; margin-left: 20rpx">
              &#xe603;
            </text>
          </view>
        </view>

        <gui-popup ref="province" position="bottom">
          <view style="height: 700rpx; background-color: white">
            <view class="gui-relative wh100p flex-column" style="padding: 10rpx; box-sizing: border-box">
              <view class="flex w100p column-center" style="justify-content: space-between; height: 50rpx; padding: 0 10rpx">
                <text style="font-weight: 600">省份</text>
                <text class="gui-block demo-close gui-icons" style="font-size: 40rpx" @tap.stop="closePop(province)">&#xe78a;</text>
              </view>
              <view class="gui-flex1" style="width: 95%; margin: 20rpx auto; height: 80%; overflow: scroll">
                <gui-stags
                  :line-height="3"
                  :padding="50"
                  :size="28"
                  :tags="[...provinceList, ...provinceList, ...provinceList]"
                  @change="changeProvince"
                />
              </view>
            </view>
            <!-- iphone 底部适配 -->
            <gui-iphone-bottom :custom-class="['gui-bg-white', 'gui-dark-bg-level-3']" />
          </view>
        </gui-popup>

        <gui-popup ref="schoolLevel" position="bottom">
          <view style="height: 700rpx; background-color: white">
            <view class="gui-relative wh100p flex-column" style="padding: 10rpx; box-sizing: border-box">
              <view class="flex w100p column-center" style="justify-content: flex-end; height: 40rpx; padding: 0 10rpx">
                <text class="gui-block demo-close gui-icons" style="font-size: 40rpx" @tap.stop="closePop(schoolLevel)">&#xe78a;</text>
              </view>
              <view class="gui-flex1" style="width: 95%; margin: 0rpx auto; height: 80%; overflow: scroll">
                <text style="font-weight: 600">办学层次</text>
                <gui-stags
                  :checked-class="['gui-bg-primary', 'gui-dark-bg', 'gui-color-white', 'text-center']"
                  class="mt10"
                  :default-class="['text-center', 'gui-bg-gray', 'gui-dark-bg-level-1', 'gui-primary-text', 'gui-dark-text-level-5']"
                  :line-height="3"
                  :padding="20"
                  :size="28"
                  :tags="[
                    { text: '本科', id: '0' },
                    { text: '专科（高职）', id: '1' },
                  ]"
                  :width="200"
                  @change="changeSchoolLevel"
                />

                <text style="font-weight: 600">办学类型</text>
                <gui-stags
                  :checked-class="['gui-bg-primary', 'gui-dark-bg', 'gui-color-white', 'text-center']"
                  class="mt10"
                  :default-class="['text-center', 'gui-bg-gray', 'gui-dark-bg-level-1', 'gui-primary-text', 'gui-dark-text-level-5']"
                  :line-height="3"
                  :padding="20"
                  :size="28"
                  :tags="[
                    { text: '本科', id: '0' },
                    { text: '专科（高职）', id: '1' },
                  ]"
                  :width="200"
                  @change="changeSchoolLevel"
                />
                <text style="font-weight: 600">院校特色</text>
                <gui-stags
                  :checked-class="['gui-bg-primary', 'gui-dark-bg', 'gui-color-white', 'text-center']"
                  class="mt10"
                  :default-class="['text-center', 'gui-bg-gray', 'gui-dark-bg-level-1', 'gui-primary-text', 'gui-dark-text-level-5']"
                  :line-height="3"
                  :padding="20"
                  :size="28"
                  :tags="[
                    { text: '本科', id: '0' },
                    { text: '专科（高职）', id: '1' },
                  ]"
                  :width="200"
                  @change="changeSchoolLevel"
                />
              </view>
            </view>
            <!-- iphone 底部适配 -->
            <gui-iphone-bottom :custom-class="['gui-bg-white', 'gui-dark-bg-level-3']" />
          </view>
        </gui-popup>

        <gui-popup ref="schoolType" position="bottom">
          <view style="height: 700rpx; background-color: white">
            <view class="gui-relative wh100p flex-column" style="padding: 10rpx; box-sizing: border-box">
              <!-- 关闭按钮 -->
              <view class="flex w100p column-center" style="justify-content: space-between; height: 50rpx; padding: 0 10rpx">
                <text style="font-weight: 600">院校类型</text>
                <text class="gui-block demo-close gui-icons" style="font-size: 40rpx" @tap.stop="closePop(schoolType)">&#xe78a;</text>
              </view>
              <view class="gui-flex1" style="width: 95%; margin: 20rpx auto; height: 80%; overflow: scroll">
                <gui-stags
                  :line-height="3"
                  :padding="50"
                  :size="28"
                  :tags="[...provinceList, ...provinceList, ...provinceList]"
                  @change="changeProvince"
                />
              </view>
            </view>
            <!-- iphone 底部适配 -->
            <gui-iphone-bottom :custom-class="['gui-bg-white', 'gui-dark-bg-level-3']" />
          </view>
        </gui-popup>
        <view class="gui-relative gui-flex1">
          <scroll-view class="gui-absolute-full gui-flex1" scroll-y style="background-color: #f7f7f7">
            <view class="gap4 flex-column">
              <view
                v-for="(item, index) of [...favoritesList, ...favoritesList, ...favoritesList, ...favoritesList]"
                :key="index"
                class="favoriteItem flex-between column-center"
                @tap="toByCollegeDetail(item)"
              >
                <view class="flex column-center gap12">
                  <img src="#" style="border-radius: 50%; border: #9e9e9e solid 1rpx; width: 70rpx; height: 70rpx" />
                  <view class="flex-column h100p flex-between gap8">
                    <text class="title" style="">{{ item.name }}</text>
                    <view class="flex" style="color: #939393; font-size: 24rpx">
                      <text class="subScience">{{ item.address }} | {{ item.schoolClass }}</text>
                    </view>
                    <view class="flex" style="color: #939393; font-size: 24rpx">
                      <text class="subScience">{{ item.grade }} | {{ item.type }}</text>
                    </view>
                  </view>
                </view>
                <view class="h100p flex-column flex-center column-center gap4" style="margin-right: 60rpx">
                  <text class="gui-icons gui-block gui-text" style="font-size: 34rpx; font-weight: 600" :style="`color:black`">40个</text>
                  <text class="gui-icons gui-block gui-text" style="font-size: 24rpx" :style="`color:rgb(172, 172, 172)`">开设专业</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<style scoped>
.favoriteItem {
  height: 200rpx;
  padding: 25rpx 30rpx;
  box-sizing: border-box;
  background-color: white;
}

.favoriteItem .title {
}

.select-box {
  border-radius: 20rpx;
  width: 220rpx;
  padding: 15rpx;
  font-size: 24rpx;
  box-sizing: border-box;
}
</style>
